<template>
  <n-card title="系统设置">
    <n-space vertical>
      <n-input placeholder="请输入系统名称" v-model:value="systemName" />
      <n-switch v-model:value="darkMode" size="large">
        <template #checked>暗黑模式</template>
        <template #unchecked>明亮模式</template>
      </n-switch>
      <n-button type="primary" @click="saveSettings">保存配置</n-button>
    </n-space>
  </n-card>
</template>

<script setup>
import { ref } from 'vue'
import { NCard, NSpace, NInput, NSwitch, NButton, useMessage } from 'naive-ui'

const message = useMessage()
const systemName = ref('')
const darkMode = ref(false)

const saveSettings = () => {
  message.success(`保存成功！系统名称：${systemName.value}，模式：${darkMode.value ? '暗黑' : '明亮'}`)
}
</script>
